<template>
  <div class="form-container">
    <el-tabs type="border-card">
      <div>
        <p class="content-tit">征订详情信息</p>
        <el-form :label-position="labelPosition" label-width="100px" :model="formData1">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="单证编码" size="mini":required="true">
                <el-select v-model="formData1.certifyCode" filterable placeholder="请选择单证编码">
                  <el-option
                    v-for="item in certifyCodeList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单证版本" size="mini":required="true">
                <el-select v-model="formData.certifyEdition" filterable placeholder="请选择">
                  <el-option
                    v-for="item in certifyTypeList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单证类型" size="mini":required="true">
                <el-select v-model="formData.certifyOperType" filterable placeholder="请选择">
                  <el-option
                    v-for="item in certifyOperTypeList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="库存数量" size="mini":required="true">
                <el-input v-model="formData1.certifyStock"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单证单价" size="mini":required="true">
                <el-input v-model="formData1.certifyPrice"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请数量" size="mini":required="true">
                <el-input v-model="formData1.applyNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="申请机构" size="mini":required="true">
                <el-select v-model="formData1.applyTempCode" filterable placeholder="请选择申请机构">
                  <el-option
                    v-for="item in tempList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间" size="mini":required="true">
                <el-date-picker v-model="formData1.applyDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div align="right">
          <el-button type="primary" @click="query" icon="el-icon-plus">添加</el-button>
        </div>
      </div>
      <div>
        <p class="content-tit">
          <span @click="isShow('isShowSingles')" v-if='isShowSingles'>-</span>
          <span @click="isShow('isShowSingles')" v-else>+</span>征订详细列表
        </p>
        <el-table :data="certifysList" ref="userTable" @selection-change="handleSelectionChange" style="width: 100%"
                  class='table-common' :highlight-current-row="true" border
                  v-show="isShowSingles">
          <el-table-column label="#" checked="selectionData"
                           type="selection"
                           min-width="6%">
          </el-table-column>
          <el-table-column label="序号" type='index' min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyCode" label="单证编码" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="certifyName" label="单证名称" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="certifyEdition" label="单证版本" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="certifyType" label="单证类型" min-width="10%" align="center"></el-table-column>
          <el-table-column prop="certifyOperType" label="单证业务类型" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyStock" label="库存数量" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="certifyPrice" label="单证单价" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="applyNo" label="申请数量" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="applyDate" label="申请时间" min-width="8%" align="center"></el-table-column>
          <el-table-column prop="applyTempCode" label="申请部门" min-width="8%" align="center"></el-table-column>
        </el-table>
        <div class="mar15 " align="right" v-show="isShowSingles">
          <el-pagination
            @current-change="handleCurrentChangeSingle"
            :current-page="selfPage.currentPage"
            :page-size="selfPage.perPage"
            layout="total, prev, pager, next, jumper"
            :total="selfPage.totalSize">
          </el-pagination>
        </div>
      </div>
      <div>
        <p class="content-tit">
          征订信息
        </p>
        <el-form :label-position="labelPosition" label-width="100px" :model="formData">
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="征订申请人" size="mini":required="true">
                <el-input v-model="formData.certifyApplyName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="征订机构" size="mini":required="true">
                <el-select v-model="formData.tempCode" filterable placeholder="请选择征订机构编码">
                  <el-option
                    v-for="item in tempList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间" size="mini":required="true">
                <el-date-picker v-model="formData.applyDate" type="date" placeholder="请输入申请时间" :format="'yyyy-MM-dd'"
                                :value-format="'yyyy-MM-dd'">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="8">
              <el-form-item label="接收人" size="mini":required="true">
                <el-select v-model="formData.receiver" filterable placeholder="请选择">
                  <el-option
                    v-for="item in receiveList"
                    :key="item.code"
                    :label="item.codeName"
                    :value="item.code">
                    <span>{{ item.code }}</span> - <span>{{ item.codeName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="接收人电话" size="mini">
                <el-input v-model="formData.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg">
            <el-col :span="16">
              <el-form-item label="征订备注" size="mini">
                <el-input type="textarea" autosize v-model="formData.applyDis" max-length="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div align="right">
          <el-button type="primary" @click="">创建征订</el-button>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    data() {
      return {
        isShowSingles: true,
        labelPosition: 'right',
        certifyTypeList: [{code: '1', codeName: '有价单证'}],
        certifyOperTypeList: [{code: '1', codeName: '契约'}, {code: '2', codeName: '保全'}, {code: '3', codeName: '理赔'}],
        isChecked: [{code: '1', codeName: '是'}, {code: '2', codeName: '否'}],
        tempList: [
          {code: '8601', codeName: '分公司'},
          {code: '860100', codeName: '支公司'},
        ],
        certifyCodeList: [],
        homeList: [],
        receiveList: [],
        formData: {
          certifyApplyName: '张三',
          applyDate: '2020-05-30',
          homeCode: '',
          receiver: '李四',
          phone: '',
          applyDis: '',
          tempCode: '860100'
        },
        formData1: {
          certifyCode: '010201',
          certifyName: '补充文件',
          certifyEdition: 202001,
          certifyType: '有价单证',
          certifyOperType: '契约',
          certifyStock: '0',
          certifyPrice: '0.2',
          applyDate: '2020-05-23',
          applyNo: '200',
          applyTempCode: '860100'

        },
        selfPage: {
          currentPage: 1,
          hasMore: true,
          perPage: 10,
          totalPage: 0,
          totalSize: 0
        },
        certifysList: [
          {
            certifyCode: '010201',
            certifyName: '补充文件',
            certifyEdition: 202001,
            certifyType: '有价单证',
            certifyOperType: '契约',
            certifyStock: '0',
            certifyPrice: '0.2',
            applyNo: '200',
            applyDate: '2020-05-23',
            applyTempCode: '支公司1'
          },
          {
            certifyCode: '010202',
            certifyName: '财务补充文件',
            certifyEdition: 202001,
            certifyType: '有价单证',
            certifyOperType: '契约',
            certifyStock: '0',
            certifyPrice: '0.2',
            applyNo: '330',
            applyDate: '2020-05-27',
            applyTempCode: '支公司1'
          },
        ]
      }
    },
    methods: {
      isShow(val) {
        this[val] = !this[val]
      },
      handleSelectionChange(val) {
        this.selectionData = val;
      },
      handleCurrentChangeSingle(num) {
        this.selfFormData.pageNum = num
      },
      query() {
      },
    }
  }
</script>

<style scoped>

</style>
